// Javascript code
/**
 * author：小小游 --- allen
 * date：2018.02.24
 * lastUpdateDate：2018.02.24
 * description：实现简易留言版的主要js代码
 */
window.onload = function () {
	/**
	 * 验证用户名 
	 * 客户端向服务器请求的接口地址和需要带的参数，如下：
	 * url：guestbook/index.php
	 * parameter：
	 * m：index
	 * a：verifyUserName
	 * username：要验证的用户名
	 * *********************-----------------------*************************
	 * 服务器向客户端返回的结果，如下：
	 * {code：返回的信息代码 0表示验证通过，1表示验证不通过，message：返回的具体结果信息}
	 */
	// 先获取元素
	var oRegUserName = document.getElementById("username1");
	var oRegPassword = document.getElementById("password1");
	var oBtnReg = document.getElementById("btnReg");
	var oLoginUserName = document.getElementById("username2");
	var oLoginPassword = document.getElementById("password2");
	var oBtnLogin = document.getElementById("btnLogin");
	var oVerifyUserNameMsg = document.getElementById("verifyUserNameMsg");
	var oUser = document.getElementById("user");
	var oReg = document.getElementById("reg");
	var oLogin = document.getElementById("login");
	var oUserInfo = document.getElementById("userinfo");
	var oLogout = document.getElementById("logout");
	var oContent = document.getElementById("content");
	var oBtnPost = document.getElementById("btnPost");
	var oList = document.getElementById("list");
	var oShowMore = document.getElementById("showMore");
	var iPage = 1;
	
	// 初始化
	updateUserStatus ();
	
	// 更新用户状态
	function updateUserStatus () {
		var uid = getCookie ('uid');
		var username = getCookie ('username');
		if (uid) {
			// 如果是登录状态
			oUser.style.display = 'block';
			oUserInfo.innerHTML = username;
			oReg.style.display = 'none';
			oLogin.style.display = 'none';
		} else {
			// 如果是未登录状态
			oUser.style.display = 'none';
			oUserInfo.innerHTML = '';
			oReg.style.display = 'block';
			oLogin.style.display = 'block';	
		}	
	}
	
	oRegUserName.addEventListener('blur', function () {
		ajax ('GET', './guestbook/index.php', 'm=index&a=verifyUserName&username=' + this.value, function (data) {
			// alert(data);	
			var objData = JSON.parse(data);
			oVerifyUserNameMsg.innerHTML = objData.message;
			// number
			// alert(typeof objData.code);
			if (objData.code) {
				oVerifyUserNameMsg.style.color = 'red';	
			} else {
				oVerifyUserNameMsg.style.color = 'green';	
			}
		});
	}, false);
	
	/**
	 * 用户注册 GET / POST
	 * 客户端向服务器请求的接口地址和需要带的参数，如下：
	 * url：guestbook/index.php
	 * parameter：
	 * m：index
	 * a：reg
	 * username：要注册的用户名
	 * password：要注册的密码
	 * *********************-----------------------*************************
	 * 服务器向客户端返回的结果，如下：
	 * {code：返回的信息代码 0表示验证通过，1表示验证不通过，message：返回的具体结果信息}
	 */
	oBtnReg.addEventListener('click', function () {
		ajax ('POST', 'guestbook/index.php', 'm=index&a=reg&username=' + encodeURI(oRegUserName.value) + '&password=' + oRegPassword.value, function (data) {
			var objData = JSON.parse(data);
			alert(objData.message);
		});
	}, false);
	
	/**
	 * 用户登录 GET / POST
	 * 客户端向服务器请求的接口地址和需要带的参数，如下：
	 * url：guestbook/index.php
	 * parameter：
	 * m：index
	 * a：login
	 * username：要登录的用户名
	 * password：要登录的密码
	 * *********************-----------------------*************************
	 * 服务器向客户端返回的结果，如下：
	 * {code：返回的信息代码 0表示验证通过，1表示验证不通过，message：返回的具体结果信息}
	 */
	oBtnLogin.addEventListener('click', function () {
		ajax ('POST', 'guestbook/index.php', 'm=index&a=login&username=' + encodeURI(oLoginUserName.value) + '&password=' + oLoginPassword.value, function (data) {
			var objData = JSON.parse(data);
			alert(objData.message);
			if (!objData.code) {
				updateUserStatus ();
			}
		});
	}, false);
	
	/**
	 * 用户退出 GET / POST
	 * 客户端向服务器请求的接口地址和需要带的参数，如下：
	 * url：guestbook/index.php
	 * parameter：
	 * m：index
	 * a：logout
	 * *********************-----------------------*************************
	 * 服务器向客户端返回的结果，如下：
	 * {code：返回的信息代码 0表示验证通过，1表示验证不通过，message：返回的具体结果信息}
	 */
	oLogout.addEventListener('click', function () {
		ajax ('GET', 'guestbook/index.php', 'm=index&a=logout', function (data) {
			var objData = JSON.parse(data);
			alert(objData.message);
			if (!objData.code) {
				updateUserStatus ();
			}
		});
	}, false);
	
	/**
	 * 用户留言 POST
	 * 客户端向服务器请求的接口地址和需要带的参数，如下：
	 * url：guestbook/index.php
	 * parameter：
	 * m：index
	 * a：send
	 * content：用户要留言的内容
	 * *********************-----------------------*************************
	 * 服务器向客户端返回的结果，如下：
	 * {code：返回的信息代码 0表示验证通过，1表示验证不通过，message：返回的具体结果信息}
	 * {cid：留言id，content：留言内容，uid：留言人的id，username：留言人的名称，dataline：留言的时间戳(秒)，support：当前这条留言顶的数量，oppose：当前这条留言踩的数量}
	 */
	oBtnPost.addEventListener('click', function () {
		ajax ('POST', 'guestbook/index.php', 'm=index&a=send&content=' + encodeURI(oContent.value), function (data) {
			var objData = JSON.parse(data);
			alert(objData.message);
			if (!objData.code) {
				getMessageList (objData.data, true);
			}
		});
	}, false);
	
	/**
	 * 初始化用户留言 GET
	 * 客户端向服务器请求的接口地址和需要带的参数，如下：
	 * url：guestbook/index.php
	 * parameter：
	 * m：index
	 * a：getList
	 * page：当前的页数，默认为第1页
	 * n：每页显示的条数，默认每页的条数为10条
	 * *********************-----------------------*************************
	 * 服务器向客户端返回的结果，如下：
	 * {code：返回的信息代码 0表示验证通过，1表示验证不通过，message：返回的具体结果信息}
	 * {cid：留言id，content：留言内容，uid：留言人的id，username：留言人的名称，dataline：留言的时间戳(秒)，support：当前这条留言顶的数量，oppose：当前这条留言踩的数量}
	 */
	ajax ('GET', 'guestbook/index.php', 'm=index&a=getList&n=10', function (data) {
		var objData = JSON.parse(data);
		var arrList = objData.data.list;
		for ( var i = 0; i < arrList.length; i++ ) {
			getMessageList (arrList[i]);		
		}
	});
	
	// 封装通用的初始化获取数据库留言的函数
	function getMessageList (data, insert) {
		var oDl = document.createElement("dl");
		var oDt = document.createElement("dt");
		var oStrong = document.createElement("strong");
		oStrong.innerHTML = data.username + '说：';
		oDt.appendChild(oStrong);
		oDl.appendChild(oDt);
		
		var oDd1 = document.createElement("dd");
		oDd1.innerHTML = data.content;
		var oDd2 = document.createElement("dd");
		oDd2.className = 't';
		oDl.appendChild(oDd1);
		oDl.appendChild(oDd2);
		
		var oA1 = document.createElement("a");
		oA1.href = 'javascript:;';
		oA1.className = 'support';
		oA1.innerHTML = '顶(<span>' + data.support + '</span>)';
		var oA2 = document.createElement("a");
		oA2.href = 'javascript:;';
		oA2.className = 'support';
		oA2.innerHTML = '踩(<span>' + data.oppose + '</span>)';
		oDd2.appendChild(oA1);
		oDd2.appendChild(oA2);
		
		if (insert && oList.children[0]) {
			oList.insertBefore(oDl, oList.children[0]);	
		} else {
			oList.appendChild(oDl);	
		}
	}
	
	function showMoreMessageList () {
		/**
		 * 初始化用户留言 GET
		 * 客户端向服务器请求的接口地址和需要带的参数，如下：
		 * url：guestbook/index.php
		 * parameter：
		 * m：index
		 * a：getList
		 * page：当前的页数，默认为第1页
		 * n：每页显示的条数，默认每页的条数为10条
		 * *********************-----------------------*************************
		 * 服务器向客户端返回的结果，如下：
		 * {code：返回的信息代码 0表示验证通过，1表示验证不通过，message：返回的具体结果信息}
		 * {cid：留言id，content：留言内容，uid：留言人的id，username：留言人的名称，dataline：留言的时间戳(秒)，support：当前这条留言顶的数量，oppose：当前这条留言踩的数量}
		 */
		ajax ('GET', 'guestbook/index.php', 'm=index&a=getList&n=10&page=' + iPage, function (data) {
			var objData = JSON.parse(data);
			var oData = objData.data;
			if (oData) {
				for ( var i = 0; i < oData.list.length; i++ ) {
					getMessageList (oData.list[i]);		
				}		
			} else {
				if (iPage == 1) {
					oList.innerHTML = '现在还没有留言，快来抢沙发啦......';
				}
				oShowMore.style.display = 'none';
			}
		});
	}
	
	// 点击显示更多加载下一页的数据
	oShowMore.addEventListener('click', function () {
		iPage++;
		showMoreMessageList ();
	}, false);
	
	// 获取cookie
	 function getCookie (key) {
	 	var arr1 = document.cookie.split('; ');
	 	for ( var i = 0; i < arr1.length; i++ ) {
	 		var arr2 = arr1[i].split('=');
	 		if (arr2[0] == key) {
	 			return arr2[1];	
	 		}
	 	}
	 }
};
